<template>
  <div class="pickImage">
    <el-dialog title="图片选择" :visible.sync="show" :modal="false" :before-close="close">
      <mix-table :page="uploadPage" @getPage="getUploadPage" showCon="true">
        <template slot="column">
          <el-table-column
            prop="id"
            label="ID">
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称">
          </el-table-column>
          <el-table-column
            prop="path"
            label="路径">
          </el-table-column>
          <el-table-column
            prop="suffix"
            label="后缀">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间">
          </el-table-column>
        </template>

        <template slot="con" slot-scope="{item}">
          <el-button plain @click="onPreview(item)">预览</el-button>
          <el-button type="danger" class="pick" @click="pick(item)" plain>选择</el-button>
        </template>
      </mix-table>
    </el-dialog>
  </div>
</template>

<script>
  import Upload from '../../api/upload'
  import mixTable from '../Table/mixTable'
  import convert from '../../utils/convert'

  export default {
    name: "index",
    components: {
      mixTable
    },
    props: ["show"],
    data() {
      return {
        dialogVisible: false,
        uploadPage: []
      }
    },
    methods: {
      getUploadPage(pageParam) {
        Upload.imageList(pageParam).then(res => {
          this.uploadPage = res.data.page

        })
      },
      close() {
        this.$emit('close')
      },
      pick(item) {
        this.$emit('pick', item)
        this.$emit('close')
      },
      onPreview(i) {
        this.$alert('<img src="' + convert.pathToUrl(i.path) + '" style="width: 100%"></img>', '图片预览', {
          dangerouslyUseHTMLString: true
        });
      }
    },
    mounted() {
      this.getUploadPage({})
    }
  }
</script>

<style scoped>

</style>
